<template>
  <div class="apply-page">
    <el-table
      v-loading="loading"
      :data="applyList"
      border
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pagination.pageNumber - 1) * pagination.pageSize }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号码" width="150">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请简要内容">
        <template slot-scope="scope">
          {{ scope.row.resource }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否已回复">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDispose"
            active-text="已回复"
            inactive-text="未回复"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row._id, scope.row.isDispose)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="lookDetail(scope.row._id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
      <el-table :data="list" border>
        <el-table-column property="title" label="类型" />
        <el-table-column property="content" label="内容" />
      </el-table>
      <div class="dialog-btn">
        <el-button type="primary" round size="mini" @click="dialogTableVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        :current-page.sync="pagination.pageNumber"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="pagination.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getApplyList, handoffState } from '@/api/apply'
export default {
  name: 'BannerPage',
  data() {
    return {
      applyList: [],
      loading: false,
      dialogTableVisible: false,
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },
      options: [
        {
          label: '已回复',
          value: true
        },
        {
          label: '未回复',
          value: false
        }
      ],
      list: [
        { title: '姓名:', content: '' },
        { title: '手机号码:', content: '' },
        { title: '申请内容:', content: '' },
        { title: '是否已回复:', content: '' }
      ]
    }
  },
  created() {
    this.getApplyListItems()
  },
  methods: {
    // 获取申请列表
    async getApplyListItems() {
      var { pageNumber, pageSize } = this.pagination
      try {
        this.loading = true
        const res = await getApplyList({ pageNumber, pageSize })
        console.log(res)
        this.applyList = res.data
        this.pagination = res.pagination
        console.log(this.pagination)
        this.loading = false
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    // 查看详情
    lookDetail(id) {
      this.dialogTableVisible = true
      const data = this.applyList.find(item => item._id === id)
      const { name, phone, resource, isDispose } = data
      this.list[0].content = name
      this.list[1].content = phone
      this.list[2].content = resource
      this.list[3].content = isDispose ? '已回复' : '未回复'
    },
    // 修改状态
    async changeState(id, isDispose) {
      try {
        await handoffState({ id, isDispose })
        this.$message.success('修改状态成功')
        this.getApplyListItems()
      } catch (error) {
        console.log(error)
        this.$message.error('修改状态失败')
      }
    },
    // 页码改变
    handleCurrentChange(val) {
      this.pagination.pageNumber = val
      this.getApplyListItems()
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-page {
  margin: 30px 20px;
}
.dialog-btn {
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px 0 0;
}
.block {
  margin-top: 20px;
  text-align: center;
}
</style>
